<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link href="avalon.buttons.css" type="text/css" rel="stylesheet" media="screen, projection" charset="utf-8" />
    </head>
    <body>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>按钮</th>
                    <th>class=""</th>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><button type="button" class="ui-button">默认</button></td>
                    <td><code>ui-button</code></td>
                    <td>带渐变的标准灰色按钮</td>
                </tr>
                <tr>
                    <td><button type="button" class="ui-button ui-button-primary">主要</button></td>
                    <td><code>ui-button ui-button-primary</code></td>
                    <td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
                </tr>
                <tr>
                    <td><button type="button" class="ui-button ui-button-info">信息</button></td>
                    <td><code>ui-button ui-button-info</code></td>
                    <td>默认样式的替代样式</td>
                </tr>
                <tr>
                    <td><button type="button" class="ui-button ui-button-success">成功</button></td>
                    <td><code>ui-button ui-button-success</code></td>
                    <td>表示成功或积极的动作</td>
                </tr>
                <tr>
                    <td><button type="button" class="ui-button ui-button-warning">警告</button></td>
                    <td><code>ui-button ui-button-warning</code></td>
                    <td>提醒应该谨慎采取这个动作</td>
                </tr>
                <tr>
                    <td><button type="button" class="ui-button ui-button-danger">危险</button></td>
                    <td><code>ui-button ui-button-danger</code></td>
                    <td>表示这个动作危险或存在危险</td>
                </tr>
                <tr>
                    <td><button type="button" class="ui-button ui-button-inverse">反向</button></td>
                    <td><code>ui-button ui-button-inverse</code></td>
                    <td>备用的暗灰色按钮，不依赖于语义和用途</td>
                </tr>
                <tr>
                    <td><button type="button" class="ui-button ui-button-link">链接</button></td>
                    <td><code>ui-button ui-button-link</code></td>
                    <td>简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为</td>
                </tr>
            </tbody>
        </table>
        <table>
            <tr><td>正常</td><td>激活</td><td>掠过</td><td>禁用 </td></tr>
            <tr>
                <td><button type="button" class="ui-button ui-button-primary">button</button></td>
                <td><button type="button" class="ui-button ui-button-primary ui-state-active">button</button></td>
                <td><button type="button" class="ui-button ui-button-primary ui-state-hover">button</button></td>
                <td><button type="button" class="ui-button ui-button-primary ui-state-disabled">button</button></td>
            </tr>
        </table>
        <h3>flat风格</h3>
        <table>
            <tr><td></td><td>primary</td><td>info</td><td>success</td><td>danger </td><td>inverse </td></tr>
            <tr>
                <td><button type="button" class="ui-button ui-button-flat">ui-button-flat</button></td>
                <td><button type="button" class="ui-button ui-button-primary-flat">ui-button-primary-flat</button></td>
                <td><button type="button" class="ui-button ui-button-info-flat">ui-button-info-flat</button></td>
                <td><button type="button" class="ui-button ui-button-success-flat">ui-button-success-flat</button></td>
                <td><button type="button" class="ui-button ui-button-danger-flat">ui-button-danger-flat</button></td>
                <td><button type="button" class="ui-button ui-button-inverse-flat">ui-button-inverse-flat</button></td>
            </tr>
        </table>
        <table>
            <tr><td rowspan=4>尺寸 </td></tr>
            <tr>
                <td><button type="button" class="ui-button ui-button-primary ui-button-small">small</button></td>
                <<td><button type="button" class="ui-button ui-button-primary ">middle</button></td>
                <td><button type="button" class="ui-button ui-button-primary ui-button-big" >big</button></td>
                <td><button type="button" class="ui-button ui-button-primary ui-button-large" >large</button></td>
            </tr>
        </table>
    </body>
</html>
